<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<!-- <el-select v-model="data.now_name" placeholder="地址" class="handle-select mr10"  @change="systemFlagChange">
					<el-option v-for="item in data.systemFlags" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
				</el-select> -->
				<el-input v-model="data.name" placeholder="软件名" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="handleClick">设置防火墙</el-button>
			</div>
			<el-table :data="data.historyData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="content" label="数据内容"></el-table-column>
            <el-table-column label="防火墙类型" align="center">
					<template #default="scope">
						<el-tag
                        :type="scope.row.status === '0' ? 'success' : scope.row.status === '1' ? 'info' : scope.row.status === '2' ? 'warning' : scope.row.status === '3' ? 'danger'  : scope.row.status === '4' ? 'primary' : scope.row.status === '5' ? 'primary' : ''"
						>
                        {{ scope.row.status==='0'? 'IP防火墙': scope.row.status==='1'? '机器黑名单': scope.row.status==='2'? '账号黑名单': scope.row.status==='3'? '注册防火墙': scope.row.status==='4'? '登录防火墙': scope.row.status==='5'? '登录函数防火墙':'大禹防火墙'}}
						</el-tag>
					</template>
				</el-table-column>
                <el-table-column label="状态" align="center">
					<template #default="scope">
						<el-tag
							:type="scope.row.ftstatus === '0' ? 'success' : scope.row.ftstatus === '1' ? 'info' : ''"
						>
                        {{ scope.row.ftstatus==='0'? '未封停': scope.row.ftstatus==='1'? '已封停':'封永久'}}
						</el-tag>
					</template>
				</el-table-column>
                <el-table-column prop="num" label="访问次数"></el-table-column>
                <el-table-column prop="sctime" label="上次时间"></el-table-column>
                <el-table-column prop="fttime" label="封停时间"></el-table-column>
                <el-table-column prop="day" label="剩余解封"></el-table-column>
           
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="jfCommon(scope.$index, scope.row)" v-permiss="15">
							解封
						</el-button>
						<el-button text :icon="Delete" class="red" @click="deleteCommon(scope.$index, scope.row)" v-permiss="16">
							拉黑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
     				 @size-change="handleSizeChange"
    				  @current-change="handleCurrentChange"
	  				:current-page="data.curPage"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="data.pageSize"
					:total="data.dataCount"
      layout="total, sizes, prev, pager, next, jumper"
     >
    </el-pagination>
				<!-- <el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="data.curPage"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="data.pageSize"
					:total="data.dataCount"
					@current-change="changepage"
				></el-pagination> -->
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<addMenuPage v-on:onItemChange="getAllDatas" ref="addMenu"></addMenuPage>
	</div>
</template>

<script setup lang="ts" name="basetable">

import addMenuPage from "./components/addtable.vue";
import { CirclePlus } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { blacklistdata} from '../../api/index';
// blacklistdata 用黑名单的---不用防火墙的，发现防火墙表内容和黑名单字段一样
// 引入day.js
import dayjs from 'dayjs'

// 方法中-时间戳转时间
const formatTime = (rowtime: any,column: any) => {
  var date = rowtime[column.property];
//   console.log(column.property)
  if (date == undefined) {
    return '';
  }
  date = Number(date+'000');
//   console.log(typeof date)
  return dayjs(date).format('YYYY-MM-DD')
}

const addMenu = ref(); //ref方法是让我们的简单类型数据变成响应式数据；在方法里改变时需要.value来获取



interface User {
		id: number;
        sctime: string;
        fttime: string;
        status: string;
        ftstatus: string;
        content: string;
        remark: string;
        day: string;
        num: string;
		
       
     
    }

    // reactive 数据双向绑定；让我们的复杂类型数据变成响应式数据；不需要.value来获取
    const data = reactive({
        dataText: "", //表格开始置空
        dataCount: 0, //共几条
        pageSize: 10, // 每页显示多少条
        curPage: 1, //第几页
        now_name: "",
		name: "",
        systemFlags: [{
            name: '集约式直饮水智能售水系统',
            id: 'water'
        }, {
            name: '污染源在线监测平台',
            id: 'pollution'
        }],
        historyData: [], //回显到表格的数据
        small: false,
    });
    // small:false
    //获取初始数据
    onMounted(() => {
        if (localStorage.getItem("systemFlag") == undefined) {
            data.now_name = data.systemFlags[0].id;
        } else {
            data.now_name = localStorage.getItem("systemFlag") || '';
        };
        getAllDatas()
    });
    const systemFlagChange = (val: string) => {
        localStorage.setItem("systemFlag", val)
        getAllDatas();
    };
    //表格初始查询
    const getAllDatas = () => {
        data.dataText = "";
        data.historyData = [];
        data.curPage = 1;
        getAllListLink();
    };
	   const getguiling = () => {
		localStorage.setItem("systemFlag", '')
		let data ={
			now_name: "",//搜索框运行完归零。清空
		}
		let params = {
            systemFlag: '',//搜索框清空
        }
	   }
    //获取表格列表数据
    const getAllListLink = () => {
        let params = {
			action:'apiindex',
			sort:'id',
			order:'desc',
			name:data.name,//搜索框
            systemFlag: data.now_name,//搜索框
            pageNum: data.curPage, //第几页
            pageSize: data.pageSize,// 每页显示多少条
        }
			
		blacklistdata(params).then(res => {
			console.log(res);
			getguiling();
            if (res.status == 200) {
                data.dataCount = res.data.total
                if (res.data.total != 0) {
                    data.historyData = res.data.rows;
					// console.log(data.historyData)
					// BASE_API
                } else {
                    data.dataText = "暂无数据";
                }
            } else if (res.status !== 200) {
                data.dataText = "暂无数据";
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        })
    };
    //分页改变
    const changepage = (index: number) => {
        data.curPage = index;
        getAllListLink();
    };
    //每页条数切换
    const handleSizeChange = (val: number) => {
        // data.curPage = 1;
        data.pageSize = val;
        getAllListLink();
    };
	    //当前页数切换
	    const handleCurrentChange = (val: number) => {
        data.curPage = val;
        // data.pageSize = 10;
        getAllListLink();
    };
    const jfCommon = (idnex: number,row: User) => {
        ElMessage({
                        showClose: true,
                        message: '解封成功',
                        type: 'success',
                    })
                };
    //删除-接口
    const deleteCommon = (idnex: number,row: User) => {
        ElMessage({
                        showClose: true,
                        message: '拉黑成功',
                        type: 'success',
                    })
        // let params = {
		// 	action:'apidel',
        //     id: row.id
        // }

        // blacklistdata(params).then(res => {
		// 	console.log(res)
		// 	    if (res.status == 200) {
        //             ElMessage({
        //                 showClose: true,
        //                 message: '操作成功',
        //                 type: 'success',
        //             })
        //             getAllDatas();
        //         } else if (res.status !== 200) {
        //             ElMessage({
        //                 showClose: true,
        //                 message: res.data.msg,
        //                 type: 'error',
        //             })
        //         }
        //     })
    };
    //添加
    const addRole = () => {
        addMenu.value.addItemShow(data.now_name)
    };
    //编辑
    const handleClick = (index: number, row: any) => {
        addMenu.value.addItemShow2(row, data.now_name)
    };

//参考 https://blog.csdn.net/Hei_lovely_cat/article/details/126105403

// const tableData = ref<TableItem[]>([]);
// const pageTotal = ref(0);
// 获取表格数据
// 查询操作
const handleSearch = () => {
	console.log(data.name)
localStorage.setItem("systemFlag", data.name)
        getAllDatas();
};


let datas = {
	action:'apiindex',
    pageIndex: 1,//当前页数，支持 .sync 修饰符	 number
	pageSize: 10//每页显示条目个数，支持 .sync 修饰符 number
};


// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	name: '',
	address: ''
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.name = row.name;
	form.address = row.address;
	editVisible.value = true;
};
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	// data.historyData.value[idx].name = form.name;
	// data.historyData.value[idx].address = form.address;
};

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
